  <template>
  <view class="body"
    ><view class="container"
      ><view class="box">
        <view class="box_title">模板</view>
        <view>
          <view v-for="(item, index) in mode" :key="index">
            <view class="model" @click="goback(item)">
              <view class="box_inner">{{ item.title ? item.title : "-" }}</view>
              <view class="choose_list">
                <view class="box_text">列表里选项:</view>
                <view v-for="(choose, index) in item.list" :key="index">
                  <span> {{ choose.name }}/</span>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "modeList",
  data() {
    return {
      mode: [
        {
          title: "起床干什么？",
          list: [
            { name: "工作" },
            { name: "学习" },
            { name: "玩手机" },
            { name: "看电视" },
            { name: "逛街" },
            { name: "聚餐" },
            { name: "发呆" },
            { name: "玩游戏" },
          ],
          key:'001'
        },
        {
          title: "掷骰子",
          list: [
            { name: "1" },
            { name: "2" },
            { name: "3" },
            { name: "4" },
            { name: "5" },
            { name: "6" },
          ],
          key:'002'
        },
        {
          title: "今晚去买什么水果？",
          list: [
            { name: "苹果" },
            { name: "哈密瓜" },
            { name: "香蕉" },
            { name: "橘子" },
            { name: "车厘子" },
            { name: "菠萝蜜" },
            { name: "其他" },
            { name: "葡萄" },
          ],
          key:'003'
        },
        {
          title: "出门传什么衣服",
          list: [
            { name: "搞怪绿" },
            { name: "亮眼橙" },
            { name: "脏粉色" },
            { name: "低调灰" },
            { name: "大地色" },
            { name: "气场红" },
            { name: "随意" },
            { name: "温柔米黄" },
          ],
          key:'004'
        },
      ],
    };
  },
  methods: {
    edit() {
      uni.navigateTo({
        url: "./edit",
      });
    },
    goback(item) {
      console.log(11);
      uni.setStorageSync("item", JSON.stringify(item));
      uni.switchTab({
        url: `/pages/decision/index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    .box {
      width: 90%;
      margin-left: 5%;
      .box_title {
        margin: 20upx 0 20upx 3%;
        font-size: 45upx;
        font-weight: 700;
        color: #888069;
      }
      .model {
        background-color: rgb(249, 205, 173);
        padding-bottom: 100upx;
        .box_inner {
          width: 100%;
          height: 100upx;
          display: flex;
          align-items: center;
          justify-content: left;
          border-radius: 20upx;
          background: rgb(210, 200, 169);
          // background-color: red;
          margin: 25upx 0;
          padding-left: 3%;
          width: 97%;
          font-size: 20px;
        }
          .choose_list{
             padding-left: 20upx;
             display: flex;
            flex-wrap: wrap;
          }
      }
    }
  }
}
</style>

        
        